<template>
  <div class="margin-top-20">
    <el-form ref="form" :model="form" label-width="170px">
      <el-form-item label="微信开放平台">
        <el-button size="small" type="primary" @click="loadAuthImage">授权第三方</el-button>
      </el-form-item>
      <el-form-item label="小程序APPID">
        <el-input v-model="form['appId']"/>
      </el-form-item>
      <el-form-item label="小程序secret">
        <el-input v-model="form['appSecret']"/>
      </el-form-item>
      <el-form-item label="腾讯地图Key">
        <el-input v-model="form['TCMapKey']"/>
      </el-form-item>
      <el-form-item label="微信支付商户号">
        <el-input v-model="form['payMch']"/>
      </el-form-item>
      <el-form-item label="微信支付api密匙">
        <el-input v-model="form['paySecret']"/>
      </el-form-item>
      <el-form-item label="证书">
        <el-input v-model="form['certPem']" rows="6" type="textarea"/>
      </el-form-item>
      <el-form-item label="key证书">
        <el-input v-model="form['keyPem']" rows="6" type="textarea"/>
      </el-form-item>
      <el-form-item label="小程序上传密钥">
        <el-input v-model="form['wxMiniUploadKey']" :rows="4" type="textarea"/>
        <el-alert :closable="false" :title="`请将IP（${form['wxUploadIp']}）添加到微信公众平台后台“开发-开发设置-小程序代码上传”中；`" type="info"/>
      </el-form-item>
      <el-form-item label="小程序服务商关联票据">
        <el-input v-model="form['serviceProviderTicket']" :rows="2" type="textarea"/>
        <el-alert :closable="false" type="info">
          非必填，若要关联小程序服务商请根据操作说明获取票据，
          <el-link :underline="false"
                   href="https://developers.weixin.qq.com/doc/oplatform/Third-party_Platforms/Before_Develop/customized_service_platform_guidelines.html"
                   type="primary" style="font-size: 12px;">票据获取说明
          </el-link>
        </el-alert>
      </el-form-item>
      <div style="text-align: center;">
        <el-button type="primary" size="small" @click="onSubmit">保 存</el-button>
      </div>
      <el-dialog :visible.sync="authCodeDialogVisible" :modal-append-to-body="false" width="392px">
        <div class="iframe">
          <div class="iframe-content">
            <iframe ref="authIframe" :src="authImage" frameborder="0" @load="listenerAuthIframe"/>
          </div>
        </div>
      </el-dialog>
    </el-form>
  </div>
</template>

<script>
  export default {
    name: 'CustomerServiceTelephone',
    data() {
      return {
        form: {
          // appId
          appId: '',
          // 密钥
          appSecret: '',
          // 腾讯地图key
          TCMapKey: '',
          // 商户号
          payMch: '',
          // 商户支付密钥
          paySecret: '',
          // 证书
          certPem: '',
          // key证书
          keyPem: '',
          // 小程序上传密钥
          wxMiniUploadKey: '',
          // 上传ip
          wxUploadIp: '',
          // 服务商关联票据
          serviceProviderTicket: ''
        },
        // 授权第三方
        authCodeDialogVisible: false,
        authImage: ''
      }
    },
    methods: {
      // 加载数据
      loadData() {
        (async () => {
          const result = await this.$service.applicationGetWechatAppConfig();
          if (result.code === 0) {
            this.form = result.data || {};
          }
        })();
      },
      // 提交
      onSubmit() {
        this.$refs.form.validate(valid => {
          if (valid) {
            (async () => {
              const params = Object.assign({}, this.form);
              const result = await this.$service.applicationSaveWechatAppConfig(params);
              if (result.code === 0) {
                this.$message.success('操作成功~');
                this.loadData();
              } else {
                this.$message.error(result.msg);
              }
            })();
          } else {
            console.log('error submit!!');
            return false;
          }
        });
      },
      // 获取授权二维码
      loadAuthImage() {
        (async () => {
          const result = await this.$service.applicationGetWxOpenAuthorizationQRCode({url: '/'});
          if (result.code === 0) {
            this.authCodeDialogVisible = true;
            this.authImage = result.data['authUrl'];
            this.isLoadAuthIframe = false;
          }
        })();
      },
      // 监听授权iframe跳转
      listenerAuthIframe() {
        const iframe = this.$refs.authIframe;
        if (this.$validate.isEmpty(iframe)) {
          return;
        }
        if (!this.isLoadAuthIframe) {
          this.isLoadAuthIframe = true;
          return;
        }
        window.location.reload();
      }
    }
  }
</script>
<style lang="scss" type="text/scss" scopedscoped>
  .iframe {
    display: block;
    width: 352px;
    height: 413px;
    border: 1px solid #666666;
    border-radius: 5px;
    overflow: hidden;

    .iframe-content {
      width: 100%;
      height: 413px;
      overflow: hidden;
      position: relative;

      iframe {
        width: 1350px;
        height: 1000px;
        position: absolute;
        left: -500px;
        top: -80px;
      }
    }
  }
</style>
